<script setup>
import { ref } from 'vue';
import MyTable from './modules/my-ui/MyTable/MyTable.vue';

const tableData = ref({
  tHead:[{
    key:"id",
    text:'学号',
    editable:false,
  },
  {
    key:"name",
    text:'姓名',
    editable:false,
  },
  {
    key:"age",
    text:'年龄',
    editable:false,
  },
  {
    key:"chinese",
    text:'语文',
    editable:true,
  },
  {
    key:"math",
    text:'数学',
    editable:true,
  },
  {
    key:"english",
    text:'英语',
    editable:true,
  }
],
  tBody:[{
    id:1,
    name:'lily',
    age:16,
    chinese:121,
    math:134,
    english:123
  },{
    id:2,
    name:'lucy',
    age:17,
    chinese:122,
    math:135,
    english:124
  },{
    id:3,
    name:'jack',
    age:18,
    chinese:123,
    math:136,
    english:125
  }]
})

const editData = ({index,key,value,text},removeInput) => {
   // ===  判断是数字还是字符串？
  if(tableData.value.tBody[index][key] != value){
    const cfm = window.confirm(`您要确定讲数据下表为[${index}]项
    [${text}]字段的内容修改为[${value}]吗？`)
    if(cfm){
      tableData.value.tBody= tableData.value.tBody.map((item,idx) => {
       index ===idx &&(item[key] = value)
        return item;
      })
    }else{
      // 取消修改 抛回调过去 卸载掉
      removeInput()
    }
  }
}
</script>

<template>
  <div>
    <my-table :data="tableData" @submit="editData" />
  </div>
</template>

<style scoped>

</style>